<template>
	<qh-page-view title="我的优惠券">
		<view class="navigation-bar">
			<view class="navigations">
				<view :class="'navs' +  (nav == 2 ? ' nav-actived' : '')" @tap="changeNav(2)">门店优惠券</view>
				<view :class="'navs' +  (nav == 5 ? ' nav-actived' : '')" @tap="changeNav(5)">会员优惠券</view>
				<!-- #ifdef MP-WEIXIN -->
				<view :class="'navs' +  (nav == 1 ? ' nav-actived' : '')" @tap="changeNav(1)" v-if="plugPermissionsData.shopcoupon">微信商家券</view>
				<view :class="'navs' +  (nav == 4 ? ' nav-actived' : '')" @tap="changeNav(4)" v-if="plugPermissionsData.wxpaycoupon">微信代金券</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 状态 -->
		<view class="nocoupon" style="padding-top: 20rpx;">
			<view :class="'nav' + (actIndex==1?' active':'')" @tap="changeIndex" data-index="1">可用券</view>
			<view :class="'nav' + (actIndex==2?' active':'')" @tap="changeIndex" data-index="2">已使用</view>
			<view :class="'nav' + (actIndex==3?' active':'')" @tap="changeIndex" data-index="3">已过期</view>
		</view>
		<view class="flex-column-100">
			<scroll-view scroll-y="true" class="scroll-view" :show-scrollbar="false" @scrolltolower="reachBottom" refresher-enabled
				@refresherrefresh="pullDownRefresh" :refresher-triggered="isRefresh" refresher-background="transparent">
				<view class="scroll-view-content">
					<!-- 优惠券 -->
					<view class="couponBgbox" v-if="nav == 2">
						<view class="home-coupon">
							<block v-for="(item, index) in coupon" :key="index" :for-id="index">
								<view class="home-coupon-item">
									<view class="iconfont iconyouhuiquan wxmericon home-coupon-item-icon"
										:style="{color:actIndex==1?'var(--primary-color)':'#ddd'}"></view>
									<view class="home-coupon-con">
										<view class="home-coupon-left">
											<view>
												<view>
													<text class="t1">￥</text>
													<text class="t2">{{item.reductionmoney}}</text>
												</view>
												<view class="t3">满{{item.needmoney}}使用</view>
											</view>
										</view>
										<view class="home-coupon-right">
											<text class="t4">{{item.coupon_name}}</text>
											<text class="t5" style="margin-bottom: 10rpx;">{{item.begin_time}}-{{item.end_time}}</text>
											<text class="t5">使用限制：{{item.store_name}}可用</text>
										</view>
									</view>
								</view>
							</block>
						</view>
						<view class="loading">
							<qh-loading v-if="isLoading" value row size="small" text="加载中"></qh-loading>
							<block v-else-if="canLoad">
								<text>下拉加载更多</text>
							</block>
						</view>
						<view class="kong" v-if="!canLoad&&!isLoading&&(!coupon||!coupon.length)">暂无优惠券</view>
						<view class="kong" v-if="coupon&&coupon.length&&!canLoad&&!isLoading">已显示全部</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<!-- 商家券 -->
					<view class="couponBgbox" v-if="nav ==1">
						<view class="home-coupon">
							<block v-for="(item, index) in mercoupon" :key="index" :for-id="index">
								<view class="home-coupon-item" @tap="toCouponDetail(item.coupon_id)">
									<view class="iconfont iconshangjiaquan wxmericon home-coupon-item-icon"></view>
									<view class="home-coupon-con">
										<view class="home-coupon-left">
											<view>
												<view>
													<text class="t1">￥</text>
													<text class="t2">{{item.discount_amount}}</text>
												</view>
												<view class="t3">满{{item.transaction_minimum}}使用</view>
											</view>
										</view>
										<view class="home-coupon-right">
											<view style="display: flex;flex-direction: row;justify-content: flex-start;align-items:center">
												<view class="home-coupon-left-icon">
													<text v-if="item.available_type == 1">线上用</text>
													<text v-else-if="item.available_type == 2">线下用</text>
													<text v-else>通用</text>
												</view>
												<text class="t4">{{item.stock_name}}</text>
											</view>

											<view>
												<text class="t5" style="margin-bottom: 10rpx;">{{item.time}}</text>
											</view>
											<view class="t5" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
												<view>使用限制：
													<text>{{item.available_type_name}}</text>
													<text>{{item.goods_type_name}}可用</text>
												</view>
												<view v-if="item.goods_type == 2" class="t5"
													@tap.stop="toProductList(item.goods_id_gather,item.store_id_gather,'')" style="width:76rpx;">查看></view>
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
						<view class="loading">
							<qh-loading v-if="merisLoading" value row size="small" text="加载中"></qh-loading>
							<block v-else-if="mercanLoad">
								<text>下拉加载更多</text>
							</block>
						</view>
						<view class="kong" v-if="!mercanLoad&&!merisLoading&&(!mercoupon||!mercoupon.length)">暂无优惠券</view>
						<view class="kong" v-if="mercoupon&&mercoupon.length&&!mercanLoad&&!merisLoading">已显示全部</view>
					</view>

					<!-- 代金券 -->
					<view class="couponBgbox" v-if="nav ==4">
						<view class="home-coupon">
							<block v-for="(item, index) in payCoupon" :key="index" :for-id="index">
								<view class="home-coupon-item" @tap="toCouponDetail(item.coupon_id)">
									<view class="iconfont icondaijinquan-03 wxmericon home-coupon-item-icon" :style="{color:actIndex==1?'#23d2c8':'#ddd'}">
									</view>
									<view class="home-coupon-con">
										<view class="home-coupon-left">
											<view>
												<view>
													<text class="t1">￥</text>
													<text class="t2">{{item.coupon_amount}}</text>
												</view>
												<view class="t3">满{{item.transaction_minimum}}使用</view>
											</view>
										</view>
										<view class="home-coupon-right">
											<view style="display: flex;flex-direction: row;justify-content: flex-start;align-items:center">
												<view class="home-coupon-left-icon">
													<text>{{item.type_name}}</text>
												</view>
												<text class="t4">{{item.stock_name}}</text>
											</view>

											<view>
												<text class="t5" style="margin-bottom: 10rpx;">{{item.time}}</text>
											</view>
											<view class="t5" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
												<view>使用限制：
													<text>{{item.coupon_type_name}}</text>
												</view>
												<view v-if="item.coupon_type == 2" class="t5"
													@tap.stop="toProductList(item.goods_id_gather,item.store_id_gather,'')">查看>
												</view>
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
						<view class="loading">
							<qh-loading v-if="payisLoading" value row size="small" text="加载中"></qh-loading>
							<block v-else-if="paycanLoad">
								<text>下拉加载更多</text>
							</block>
						</view>
						<view class="kong" v-if="!paycanLoad&&!payisLoading&&(!payCoupon||!payCoupon.length)">暂无优惠券</view>
						<view class="kong" v-if="payCoupon&&payCoupon.length&&!paycanLoad&&!payisLoading">已显示全部</view>
					</view>
					<!-- #endif -->
					<!-- 会员优惠券 -->
					<view class="couponBgbox" v-if="nav ==5">
						<view class="home-coupon">
							<block v-for="(item, index) in memberCoupon" :key="index" :for-id="index">
								<view class="home-coupon-item" @tap="toCouponDetail(item.id)">
									<view class="iconfont iconhuiyuanyouhuiquan wxmericon home-coupon-item-icon" :style="{color:actIndex==1?'#efa04b':'#ddd'}">
									</view>
									<view class="home-coupon-con">
										<view class="home-coupon-left">
											<view>
												<view>
													<text class="t1">￥</text>
													<text class="t2">{{item.discount_amount}}</text>
												</view>
												<view class="t3">满{{item.consumption_threshold}}使用</view>
											</view>
										</view>
										<view class="home-coupon-right" style="padding: 20rpx 10rpx 16rpx 30rpx;">
											<view style="display: flex;flex-direction: row;justify-content: flex-start;align-items:center">
												<text class="t4">{{item.coupon_name}}</text>
											</view>
											<view style="line-height: 24rpx;">
												<text class="t5" style="margin-bottom: 10rpx;">{{item.validity_time}}</text>
											</view>
											<view class="t5" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
												<view>使用限制：
													<text>{{item.appoint_type_name}}</text>
												</view>
												<view v-if="item.appoint_type == 2 || item.appoint_type == 3" class="t5"
													@tap.stop="toProductList(item.appoint_id_gather,item.storeids,item.appoint_type)">
													查看详情</view>
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
						<view class="loading">
							<qh-loading v-if="memberisLoading" value row size="small" text="加载中"></qh-loading>
							<block v-else-if="memberCanload">
								<text>下拉加载更多</text>
							</block>
						</view>
						<view class="kong" v-if="!memberCanload&&!memberisLoading&&(!memberCoupon||!memberCoupon.length)">暂无优惠券
						</view>
						<view class="kong" v-if="memberCoupon&&memberCoupon.length&&!memberCanload&&!memberisLoading">已显示全部</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</qh-page-view>
</template>

<script>
	var app = getApp().globalData;

	export default {
		data() {
			return {
				coupon: [],
				actIndex: 1,
				page: 0,
				canLoad: true,
				isLoading: false,
				nav: 2, //1商家券 2优惠券 4代金券 5会员优惠券
				mercoupon: [], //商家券列表
				merpage: 0,
				mercanLoad: true,
				merisLoading: false,
				ismerCoupon: false, //是否有商家券权限
				plugPermissionsData: {},
				payCoupon: [],
				paypage: 0,
				paycanLoad: true,
				payisLoading: false,
				memberCoupon: [], //会员优惠券
				memberPage: 0,
				memberCanload: true,
				memberisLoading: false,
				isRefresh: false,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			await this.$onLaunched;
			getApp().globalData.sendRequest({
				url: "/Plug/getPlugPermissions",
				data: {},
				success: res => {
					if (res.status == 1) {
						this.plugPermissionsData = res.data.plug
					}
				}
			})
			if ([1, 2, 4, 5].indexOf(options.nav) >= 0) {
				this.nav = options.nav;
			}
			if (this.nav == 1) {
				//商家券
				this.getMerData()
			} else if (this.nav == 4) {
				//代金券
				this.getPayCoupon()
			} else if (this.nav == 2) {
				//优惠券
				this.getData()
			} else if (this.nav == 5) {
				//会员优惠券
				this.getOrdinaryCouponList();

			}

		},
		methods: {
			/**
			 * 页面下拉触顶事件的处理函数
			 */
			pullDownRefresh() {
				this.isRefresh = true;
				this.setData({
					canLoad: true,
					page: 0,
					mercanLoad: true,
					merpage: 0,
					paycanLoad: true,
					paypage: 0,
					memberPage: 0,
					memberCanload: true,
				});
				this.getData(() => {
					this.isRefresh = false;
					uni.showToast({
						title: '刷新成功',
						duration: 800
					});
				});
			},
			/**
			 * 页面上拉触底事件的处理函数
			 */
			reachBottom() {
				if (this.nav == 1) {
					this.getMerData();
				} else if (this.nav == 2) {
					this.getData();
				} else if (this.nav == 4) {
					this.getPayCoupon()
				} else if (this.nav == 5) {
					this.getOrdinaryCouponList();
				}

			},
			//切换商家券和优惠券、代金券，会员优惠券
			changeNav(nav) {
				this.nav = nav;
				this.page = 0;
				this.merpage = 0;
				this.paypage = 0;
				console.log("nav", nav)
				if (nav == 1) {
					console.log("商家券")
					this.getMerData()
				} else if (nav == 2) {
					console.log("优惠券")
					this.getData()
				} else if (nav == 4) {
					console.log("代金券")
					this.getPayCoupon()
				} else if (nav == 5) {
					console.log("会员优惠券")
					this.getOrdinaryCouponList();
				}
			},
			// 切换可用状态
			changeIndex: function(e) {
				var actIndex = e.currentTarget.dataset.index;
				if (actIndex != this.actIndex) {
					this.setData({
						canLoad: true,
						mercanLoad: true,
						paycanLoad: true,
						memberCanload: true,
						merpage: 0,
						page: 0,
						paypage: 0,
						memberPage: 0,
						coupon: [],
						mercoupon: [],
						payCoupon: [],
						memberCoupon: [],
						actIndex: actIndex
					});
					if (this.nav == 1) {
						//商家券
						this.getMerData()
					} else if (this.nav == 2) {
						//优惠券
						this.getData();
					} else if (this.nav == 4) {
						//代金券
						this.getPayCoupon()
					} else if (this.nav == 5) {
						//会员优惠券
						this.getOrdinaryCouponList()
					}
				}
			},
			//获取商家券
			getMerData: function(fn) {
				if (!this.mercanLoad) {
					return;
				}
				this.setData({
					merisLoading: true,
					mercanLoad: false
				});
				var merpage = parseInt(this.merpage) + 1;
				getApp().globalData.sendRequest({
					url: '/ShopCoupon/userShopCouponList',
					type: "post",
					showLoading: false,
					data: {
						type: this.actIndex,
						page: merpage
					},
					success: (res) => {
						// console.log(res);
						if (res.status == 1) {
							var mercoupon = this.mercoupon;

							if (merpage == 1) {
								mercoupon = res.data.list;
							} else {
								mercoupon = [...mercoupon, ...res.data.list]
							}

							var mercanLoad = true;

							if (res.data.list.length < 10) {
								mercanLoad = false;
							}

							this.setData({
								mercanLoad: mercanLoad,
								merpage: merpage,
								mercoupon: mercoupon,
								merisLoading: false
							});

							if (typeof fn == "function") {
								fn();
							}
						} else {
							this.setData({
								mercanLoad: true,
								merpage: merpage--,
								merisLoading: false
							});
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
							});
						}
					}
				});
			},
			//获取优惠券
			getData: function(fn) {
				if (!this.canLoad) {
					return;
				}
				this.setData({
					isLoading: true,
					canLoad: false
				});
				var that = this;
				var page = parseInt(this.page) + 1;
				getApp().globalData.sendRequest({
					url: '/Coupon/myCoupon_v2',
					type: "post",
					showLoading: false,
					data: {
						type: that.actIndex,
						page: page
					},
					success: function(res) {
						// console.log(res);
						if (res.status == 1) {
							var coupon = that.coupon;

							if (page == 1) {
								coupon = res.data;
							} else {
								coupon.push.apply(coupon, res.data);
							}

							var canLoad = true;

							if (res.data.length < res.limit) {
								canLoad = false;
							}

							that.setData({
								canLoad: canLoad,
								page: page,
								coupon: coupon,
								isLoading: false
							});

							if (typeof fn == "function") {
								fn();
							}
						} else {
							that.setData({
								canLoad: true,
								page: page--,
								isLoading: false
							});
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
							});
						}
					}
				});
			},

			//获取代金券
			getPayCoupon() {
				if (!this.paycanLoad) {
					return;
				}
				this.setData({
					payisLoading: true,
					paycanLoad: false
				});
				var that = this;
				var paypage = parseInt(this.paypage) + 1;
				getApp().globalData.sendRequest({
					url: '/PayCoupon/userPayCouponList',
					type: "post",
					showLoading: false,
					data: {
						type: that.actIndex,
						page: paypage,
						limit: 10
					},
					success: function(res) {
						// console.log(res);
						if (res.status == 1) {
							var payCoupon = that.payCoupon;

							if (paypage == 1) {
								payCoupon = res.data.list;
							} else {
								payCoupon = [...payCoupon, ...res.data.list]
							}

							var paycanLoad = true;

							if (res.data.list.length < 10) {
								paycanLoad = false;
							}

							that.setData({
								paycanLoad: paycanLoad,
								paypage: paypage,
								payCoupon: payCoupon,
								payisLoading: false
							});

							if (typeof fn == "function") {
								fn();
							}
						} else {
							that.setData({
								paycanLoad: true,
								paypage: paypage--,
								payisLoading: false
							});
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
							});
						}
					}
				});

			},
			//获取会员优惠券
			getOrdinaryCouponList() {
				if (!this.memberCanload) {
					return;
				}
				this.setData({
					memberisLoading: true,
					memberCanload: false
				});
				var that = this;
				var mempage = parseInt(this.memberPage) + 1;
				getApp().globalData.sendRequest({
					url: '/Coupon/getOrdinaryCouponList',
					type: "post",
					showLoading: false,
					data: {
						type: that.actIndex,
						page: mempage,
						limit: 10
					},
					success: function(res) {
						// console.log(res);
						if (res.status == 1) {
							let memberCoupon = that.memberCoupon;
							if (mempage == 1) {
								memberCoupon = res.data;
							} else {
								memberCoupon = [...memberCoupon, ...res.data]
							}

							let memberCanload = true;

							if (res.data.length < 10) {
								memberCanload = false;
							}
							that.setData({
								memberCanload: memberCanload,
								memberPage: mempage,
								memberCoupon: memberCoupon,
								memberisLoading: false
							});

							if (typeof fn == "function") {
								fn();
							}
						} else {
							that.setData({
								memberCanload: true,
								memberisLoading: false
							});
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
							});
						}
					}
				});
			},
			//部分商品可以用-查看
			toProductList(good_id, store_id, appoint_type) {
				// console.log('good_id,store_id,appoint_type',good_id,store_id,dappoint_type)
				let mem_appoint_type = appoint_type ? appoint_type : '';
				let goods_id_gather = good_id;
				let coupon_type = this.nav == 1 ? 3 : this.nav == 5 ? 5 : this.nav == 4 ? 4 : '';
				uni.navigateTo({
					url: "../../product/productList/productList?goods_id_gather=" + goods_id_gather +
						'&coupon_type=' + coupon_type + '&store_id=' + store_id + '&appoint_type=' +
						mem_appoint_type
				})

			},
			//查看优惠券详情
			toCouponDetail(id) {
				let genre = this.nav == 4 ? 4 : 3;
				if (this.nav == 4) {
					//商家券
					genre = 4
				} else if (this.nav == 5) {
					//会员优惠券
					genre = 5
				} else {
					//代金券
					genre = 3
				}
				uni.navigateTo({
					url: "../../index/merCouponDetail/merCouponDetail?id=" + id + '&type=2' + "&genre=" + genre
				})
			}
		}
	};
</script>
<style>
	@import "./mycoupon.css";

	.navigation-bar {
		width: 100%;
		height: 90rpx;
		/* padding-top: 60rpx; */
		background: #fff;
		display: flex;
		align-items: center;

	}

	.navigations {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		height: 54rpx;
		background: rgba(246, 246, 246, 1);
		border-radius: 26rpx;
		margin: 0 auto;

	}

	.navs {
		width: 180rpx;
		height: 54rpx;
		border-radius: 26rpx;
		line-height: 54rpx;
		font-size: 28rpx;
		color: #333;
		text-align: center;
		background: rgba(246, 246, 246, 1);
	}

	.nav-actived {
		background: var(--primary-color);
		color: #fff
	}

	.nav_w2 {
		width: 360rpx;
	}

	.nav_w1 {
		width: 540rpx;
	}

	/* 优惠券 */
	.home-coupon {
		/* height: 104rpx; */
		margin-top: 20rpx;
		width: 100%;
		/* 	white-space: nowrap; */
		/* overflow: hidden; */
		/* 	overflow-x: auto; */
	}

	.home-coupon-item {
		display: inline-block;
		vertical-align: top;
		align-items: center;
		position: relative;
		width: 100%;
		height: 180rpx;
		margin: 12rpx 0;
	}



	.home-coupon-item>image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.home-coupon-item-icon {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.home-coupon-con {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
	}

	.home-coupon-left {
		width: 206rpx;
		display: flex;
		align-items: flex-end;
		color: white;
		justify-content: center;
	}

	.home-coupon-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		position: relative;
		color: white;
		height: 100%;
		padding: 30rpx 10rpx 16rpx 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.t1 {
		font-size: 20rpx;
		letter-spacing: 2rpx;
	}

	.t2 {
		font-size: 50rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
	}

	.t3 {
		font-size: 22rpx;
	}

	.t4 {
		font-size: 36rpx;
		font-weight: bold;
	}

	.t5 {
		font-size: 24rpx;
	}

	.home-coupon-btn-disable {
		background-color: #f5f5f5;
		color: #aaa;
	}

	.back-icon {
		width: 20rpx;
		height: 32rpx;
		transform: rotateY(180deg);
		/* */
	}

	.home-coupon-left-icon {
		width: 70rpx;
		height: 28rpx;
		font-size: 18rpx;
		color: #fff;
		background-image: url(/static/images/merCoupon-scene.png);
		background-size: 100% 100%;
		text-align: center;
		line-height: 23rpx;
		margin-right: 6rpx
	}

	.wxmericon {
		color: #3fd8a3;
		font-size: 182rpx;
	}
</style>
